<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>秒杀商品列表</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="bg-light">
<div class="container mt-4">
    <h3 class="mb-4 text-center">⚡ 秒杀专场</h3>

    <div class="row row-cols-1 row-cols-md-3 g-4">
        <div class="col" th:each="g : ${goodsList}">
            <div class="card h-100 shadow-sm">
                <img th:src="${g.goodsImg}" class="card-img-top" alt="商品图" style="height: 180px; object-fit: cover;">
                <div class="card-body d-flex flex-column">
                    <h5 class="card-title" th:text="${g.goodsName}">商品名称</h5>
                    <p class="card-text text-muted" th:text="${g.goodsTitle}">简短描述</p>

                    <!-- 价格行 -->
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <span class="text-danger fw-bold fs-5">
                            ¥<span th:text="${g.seckillPrice}">0.00</span>
                        </span>
                        <del class="text-secondary" th:text="'¥'+${g.goodsPrice}">原价</del>
                    </div>

                    <!-- 库存 & 倒计时 -->
                    <div class="mb-2">
                        <small class="text-warning">剩余 <span th:text="${g.stockCount}">0</span> 件</small>
                        <div class="text-muted small countdown"
                             th:data-start="${g.startDate}" th:data-end="${g.endDate}">加载倒计时...</div>
                    </div>

                    <!-- 替换原来“立即抢购”按钮那一行 -->
                    <form th:action="@{/goods/todetail}" method="post" class="mt-auto">
                        <input type="hidden" name="goodsId" th:value="${g.id}">
                        <button class="btn btn-danger w-100"
                                th:disabled="${g.stockCount <= 0}"
                                th:text="${g.stockCount <= 0 ? '已售罄' : '立即抢购'}">立即抢购</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Bootstrap & 倒计时 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
    // 统一倒计时
    document.querySelectorAll('.countdown').forEach(function (el) {
        const start = new Date(el.dataset.start).getTime(),
            end   = new Date(el.dataset.end).getTime(),
            now   = Date.now();
        let timer = setInterval(function () {
            const t = end - Date.now();
            if (t <= 0) { el.textContent = '秒杀已结束'; clearInterval(timer); return; }
            if (now < start) { el.textContent = '未开始'; return; }
            const h = String(Math.floor(t / 3600000)).padStart(2, 0),
                m = String(Math.floor(t % 3600000 / 60000)).padStart(2, 0),
                s = String(Math.floor(t % 60000 / 1000)).padStart(2, 0);
            el.textContent = `距结束 ${h}:${m}:${s}`;
        }, 1000);
    });
</script>
</body>
</html>